<template>
	<view class="main">
		<view class="swiper">
			<swiper class="swiper-list" indicator-dots indicator-color="#eee" :indicator-active-color="themeColor.theme"
				interval="5000" :autoplay="autoplay" :duration="duration" @change="swiperChange">

				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="swiper-item">
						<view class="swiper-item-img">
							<image :src="item.image"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view :style="{backgroundColor: themeColor.theme}" class="jumpover" @tap="launchFlag()"
				v-if="swiperCurrent+1 < swiperLength">跳过</view>
			<view :style="{backgroundColor: themeColor.theme}" class="experience" @tap="launchFlag()"
				v-if="swiperCurrent+1 == swiperLength">立即体验</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		swiperCurrent: 0,
		swiperLength: 0,
		swiperList: [],
		autoplay: true,
		duration: 500,
		jumpover: '跳过',
	});

	//在页面所有元素加载完成后执行
	onLoad((opt) => {
		if (opt.hasOwnProperty('invite_code')) {
			cache.set('invite_code', opt.invite_code);
		}
		// #ifdef H5 || MP
		uni.switchTab({
			url: '/pages/tabbar/index/index'
		});
		return
		// #endif
		getImage();
	});

	onShow(() => {});

	//在页面解析完成之后执行
	onReady(() => {});

	//轮播图切换修改背景色
	function swiperChange(e) {
		var index = e.detail.current;
		state.swiperCurrent = index;
		state.swiperLength = state.swiperList.length;
	}

	function launchFlag() {
		// 标记已经引导
		cache.set('launchFlag', true);
		console.log('是否引导-guide', cache.get('launchFlag'));
		// 跳转首页
		uni.switchTab({
			url: '/pages/tabbar/index/index'
		});
	}

	// 获取引导图
	function getImage() {
		request.get('index/appGuide').then(res => {
			console.log('appGuide', res);
			state.swiperList = res.data;
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		swiperCurrent,
		swiperLength,
		swiperList,
		autoplay,
		duration,
		jumpover,
	} = toRefs(state);
</script>

<style lang="scss">
	page,
	.main {
		width: 100%;
		height: 100%;
		padding: 0;
		background-size: 100% auto;
	}

	.swiper {
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.swiper-list {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.swiper-item-img {
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.swiper-item-img image {
		width: 100%;
		height: 100%;
	}

	.jumpover,
	.experience {
		position: absolute;
		z-index: 999;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		color: #fff;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
	}

	.jumpover {
		right: 30rpx;
		top: 90rpx;
	}

	.experience {
		right: 50%;
		bottom: 60rpx;
		margin-right: -116rpx;
	}
</style>